<template>
  <div class="query">
    <label :for="props.id">{{ props.name }}</label>
    <el-input
      v-if="props.type === 'input'"
      :id="props.id"
      v-model="localValue"
      @input="updateValue"
      placeholder="请输入"
      clearable
    />
    <el-select
      v-if="props.type === 'select'"
      :id="props.id"
      v-model="localValue"
      @change="updateValue"
      placeholder="请选择"
      clearable
    >
      <el-option
        v-for="item in props.option"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-tree-select
      v-if="props.type === 'tree'"
      v-model="localValue"
      :data="props.option"
      :props="props.props"
      :render-after-expand="false"
      check-strictly
      filterable
      clearable
      @change="updateValue"
    />
  </div>
</template>  

<script setup>
import { defineProps, defineEmits, ref, watch } from "vue";

const props = defineProps({
  id: String,
  name: String,
  option: Array,
  value: [String, Boolean, Number],
  type: {
    type: String,
    default: "input",
  },
  props: Object,
});

const emit = defineEmits(["update:value"]);
const localValue = ref(props.value);

watch(
  () => props.value,
  (newValue) => {
    if (newValue !== localValue.value) {
      localValue.value = newValue;
    }
  },
  { immediate: true }
);

function updateValue(newValue) {
  emit("update:value", { key: props.id, value: newValue });
}
</script>

<style lang="scss" scoped>
.query {
  display: flex;
  align-items: center;
  gap: 8px;

  .el-button {
    margin: 0;
  }
}

.el-input,
.el-select {
  flex: 1;
}
</style>